// 权限管理
import React, { Component } from 'react';
import "../../assets/style/role/roleUserList.css"
import { Card, Form, Row, Col, Input, Button, message, Table, Space,Breadcrumb } from 'antd';

const data = [
  {
    key: '1',
    firstName: 'John',
    lastName: 'Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    firstName: 'Jim',
    lastName: 'Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    firstName: 'Joe',
    lastName: 'Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

export default class roleUserList extends Component {
  search = (value) => {
    console.log(value);
    message.success("查询成功")
  }
  render() {
    return (
      <div>
        {/*  用户筛选*/}
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>权限管理</Breadcrumb.Item>
          <Breadcrumb.Item>用户管理</Breadcrumb.Item>
        </Breadcrumb>
        <Card bordered={false} >
          <h1 className={"userSearchN"}>用户筛选</h1>
          <Form onFinish={this.search} className={"userSearchForm"}>
            <Row span={24} className={"userSearchBox"}>
              <Col span={6}>
                <Form.Item name="userAccount" label="账号">
                  <Row>
                    <Input placeholder="" style={{ width: 200 }} />
                  </Row>
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item name="userEmail" label="邮箱">
                  <Row>
                    <Input placeholder="" style={{ width: 200 }} />
                  </Row>
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item name="userPhone" label="电话">
                  <Row>
                    <Input placeholder="" style={{ width: 200 }} />
                  </Row>
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item name="userState" label="状态">
                  <Row>
                    <Input placeholder="" style={{ width: 200 }} />
                  </Row>
                </Form.Item>
              </Col>
            </Row>
            <Form.Item className={"userSearchBtn"}>
              <Button className={"userSearch"} htmlType="submit" type="primary">查 询</Button>
              <Button className={"userDel"} type="primary">重 置</Button>
            </Form.Item>
          </Form>
        </Card>
        {/*    用户列表*/}
        <Card className={"RoleUserList"}>
          <Form className={"userForm"}>
            <h1>用户列表</h1>
          </Form>
          <Table dataSource={data} bordered>
            <Table.Column title="序号" dataIndex="firstName" key="firstName" />
            <Table.Column title="账号" dataIndex="lastName" key="lastName" />
            <Table.Column title="邮箱" dataIndex="age" key="age" />
            <Table.Column title="address" dataIndex="address" key="address" />
            <Table.Column title="address" dataIndex="address" key="address" />
            <Table.Column title="address" dataIndex="address" key="address" />
            <Table.Column
              title="Action"
              key="action"
              render={(text, record) => (
                <Space size="middle">
                  <Button type="primary">修改</Button>
                </Space>
              )}
            />
          </Table>
        </Card>
      </div>
    )
  }
}
